<!-- Weather Font Version: Beta 1 -->

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="author" content="Michal Woyowd">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		
		<!-- include own stylesheet: cheatsheet.css -->
		<link rel="stylesheet" type="text/css" href="css/cheatsheet.css">
		
		<!-- include the weather icons: weather-icons-min.css -->
		<link rel="stylesheet" type="text/css" href="css/weather-icons.min.css">
		
		<!-- include Google font 'Average' -->
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Average+Sans">
	</head>

	<body>
		<div id="page_wrapper">
			<header>
				<div id="header_content">
					
				</div>
				
			</header>

			<div id="main">
				<div id="main_content">
					<h2>Day / Sunny</h2>
					
					<!--														DAY / SUNNY 																			-->
					
					<!--	ICON							|	CSS NAME												|	UNICODE									 	-->
					<!-- -----------------------------------|-----------------------------------------------------------|----------------------------------------------	-->
					<div class="left">
						<a class="icon">&#xf000;&nbsp;</a>	<a class="icon_name">wi-day-cloudy-gusts&nbsp;</a>			<a class="icon_unicode">(&amp;#xf000;)</a><br />
						<a class="icon">&#xf001;&nbsp;</a>	<a class="icon_name">wi-day-cloudy-windy&nbsp;</a>			<a class="icon_unicode">(&amp;#xf001;)</a><br />
						<a class="icon">&#xf002;&nbsp;</a>	<a class="icon_name">wi-day-cloudy&nbsp;</a>				<a class="icon_unicode">(&amp;#xf002;)</a><br />
						<a class="icon">&#xf003;&nbsp;</a>	<a class="icon_name">wi-day-fog&nbsp;</a>					<a class="icon_unicode">(&amp;#xf003;)</a><br />
						<a class="icon">&#xf004;&nbsp;</a>	<a class="icon_name">wi-day-hail&nbsp;</a>					<a class="icon_unicode">(&amp;#xf004;)</a><br />
						<a class="icon">&#xf005;&nbsp;</a>	<a class="icon_name">wi-day-lightning&nbsp;</a>				<a class="icon_unicode">(&amp;#xf005;)</a><br />
					</div>
					<div class="center">
						<a class="icon">&#xf006;&nbsp;</a>	<a class="icon_name">wi-day-rain-mix&nbsp;</a>				<a class="icon_unicode">(&amp;#xf006;)</a><br />
						<a class="icon">&#xf007;&nbsp;</a>	<a class="icon_name">wi-day-rain-wind&nbsp;</a>				<a class="icon_unicode">(&amp;#xf007;)</a><br />
						<a class="icon">&#xf008;&nbsp;</a>	<a class="icon_name">wi-day-rain&nbsp;</a>					<a class="icon_unicode">(&amp;#xf008;)</a><br />
						<a class="icon">&#xf009;&nbsp;</a>	<a class="icon_name">wi-day-showers&nbsp;</a>				<a class="icon_unicode">(&amp;#xf009;)</a><br />
						<a class="icon">&#xf00a;&nbsp;</a>	<a class="icon_name">wi-day-snow&nbsp;</a>					<a class="icon_unicode">(&amp;#xf001;)</a><br />
						<a class="icon">&#xf00b;&nbsp;</a>	<a class="icon_name">wi-day-sprinkle&nbsp;</a>				<a class="icon_unicode">(&amp;#xf00b;)</a><br />
					</div>
					<div class="right">
						<a class="icon">&#xf00c;&nbsp;</a>	<a class="icon_name">wi-day-sunny-overcast&nbsp;</a>		<a class="icon_unicode">(&amp;#xf00c;)</a><br />
						<a class="icon">&#xf00d;&nbsp;</a>	<a class="icon_name">wi-day-sunny&nbsp;</a>					<a class="icon_unicode">(&amp;#xf00d;)</a><br />
						<a class="icon">&#xf00e;&nbsp;</a>	<a class="icon_name">wi-day-storm-showers&nbsp;</a>			<a class="icon_unicode">(&amp;#xf00e;)</a><br />
						<a class="icon">&#xf010;&nbsp;</a>	<a class="icon_name">wi-day-thunderstorm&nbsp;</a>			<a class="icon_unicode">(&amp;#xf010;)</a><br />
					</div>
					<div class="stop_float"> </div>
					
					<h2>Neutral / Cloudy</h2>
					
					<!--														NEUTRAL / CLOUDY																		-->
					
					<!--	ICON							|	CSS NAME												|	UNICODE									 	-->
					<!-- -----------------------------------|-----------------------------------------------------------|----------------------------------------------	-->
					
					<div class="left">
						<a class="icon">&#xf011;&nbsp;</a>	<a class="icon_name">wi-cloudy-gusts&nbsp;</a>				<a class="icon_unicode">(&amp;#xf011;)</a><br />
						<a class="icon">&#xf012;&nbsp;</a>	<a class="icon_name">wi-cloudy-windy&nbsp;</a>				<a class="icon_unicode">(&amp;#xf012;)</a><br />
						<a class="icon">&#xf013;&nbsp;</a>	<a class="icon_name">wi-cloudy&nbsp;</a>					<a class="icon_unicode">(&amp;#xf013;)</a><br />
						<a class="icon">&#xf014;&nbsp;</a>	<a class="icon_name">wi-fog&nbsp;</a>						<a class="icon_unicode">(&amp;#xf014;)</a><br />
						<a class="icon">&#xf015;&nbsp;</a>	<a class="icon_name">wi-hail&nbsp;</a>						<a class="icon_unicode">(&amp;#xf015;)</a><br />
					</div>
					<div class="center">
						<a class="icon">&#xf016;&nbsp;</a>	<a class="icon_name">wi-lightning&nbsp;</a>					<a class="icon_unicode">(&amp;#xf016;)</a><br />
						<a class="icon">&#xf017;&nbsp;</a>	<a class="icon_name">wi-rain-mix&nbsp;</a>					<a class="icon_unicode">(&amp;#xf017;)</a><br />
						<a class="icon">&#xf018;&nbsp;</a>	<a class="icon_name">wi-rain-wind&nbsp;</a>					<a class="icon_unicode">(&amp;#xf018;)</a><br />
						<a class="icon">&#xf019;&nbsp;</a>	<a class="icon_name">wi-rain&nbsp;</a>						<a class="icon_unicode">(&amp;#xf019;)</a><br />
						<a class="icon">&#xf01a;&nbsp;</a>	<a class="icon_name">wi-showers&nbsp;</a>					<a class="icon_unicode">(&amp;#xf01a;)</a><br />
					</div>
					<div class="right">
						<a class="icon">&#xf01b;&nbsp;</a>	<a class="icon_name">wi-snow&nbsp;</a>						<a class="icon_unicode">(&amp;#xf01b;)</a><br />
						<a class="icon">&#xf01c;&nbsp;</a>	<a class="icon_name">wi-sprinkle&nbsp;</a> 					<a class="icon_unicode">(&amp;#xf01c;)</a><br />
						<a class="icon">&#xf01d;&nbsp;</a>	<a class="icon_name">wi-storm-showers&nbsp;</a> 			<a class="icon_unicode">(&amp;#xf01d;)</a><br />
						<a class="icon">&#xf01e;&nbsp;</a>	<a class="icon_name">wi-thunderstorm&nbsp;</a> 				<a class="icon_unicode">(&amp;#xf01e;)</a><br />
					</div>
					<div class="stop_float"> </div>
					
					<h2>Night / Moons</h2>
					
					<!--														NIGHT / MOONS 																			-->
					
					<!--	ICON							|	CSS NAME												|	UNICODE									 	-->
					<!-- -----------------------------------|-----------------------------------------------------------|----------------------------------------------	-->
					
					<div class="left">
						<a class="icon">&#xf022;&nbsp;</a>	<a class="icon_name">wi-night-alt-cloudy-gusts&nbsp;</a>	<a class="icon_unicode">(&amp;#xf022;)</a><br />
						<a class="icon">&#xf023;&nbsp;</a>	<a class="icon_name">wi-night-alt-cloudy-windy&nbsp;</a>	<a class="icon_unicode">(&amp;#xf023;)</a><br />
						<a class="icon">&#xf024;&nbsp;</a>	<a class="icon_name">wi-night-alt-hail&nbsp;</a>			<a class="icon_unicode">(&amp;#xf024;)</a><br />
						<a class="icon">&#xf025;&nbsp;</a>	<a class="icon_name">wi-night-alt-lightning&nbsp;</a>		<a class="icon_unicode">(&amp;#xf025;)</a><br />
						<a class="icon">&#xf026;&nbsp;</a>	<a class="icon_name">wi-night-alt-rain-mix&nbsp;</a>		<a class="icon_unicode">(&amp;#xf026;)</a><br />
						<a class="icon">&#xf027;&nbsp;</a>	<a class="icon_name">wi-night-alt-rain-wind&nbsp;</a>		<a class="icon_unicode">(&amp;#xf027;)</a><br />
						<a class="icon">&#xf028;&nbsp;</a>	<a class="icon_name">wi-night-alt-rain&nbsp;</a>			<a class="icon_unicode">(&amp;#xf028;)</a><br />
						<a class="icon">&#xf029;&nbsp;</a>	<a class="icon_name">wi-night-alt-showers&nbsp;</a>			<a class="icon_unicode">(&amp;#xf029;)</a><br />
						<a class="icon">&#xf02a;&nbsp;</a>	<a class="icon_name">wi-night-alt-snow&nbsp;</a>			<a class="icon_unicode">(&amp;#xf02a;)</a><br />
					</div>
					<div class="center">
						<a class="icon">&#xf02b;&nbsp;</a>	<a class="icon_name">wi-night-alt-sprinkle&nbsp;</a>		<a class="icon_unicode">(&amp;#xf02b;)</a><br />
						<a class="icon">&#xf02c;&nbsp;</a>	<a class="icon_name">wi-night-alt-storm-showers&nbsp;</a>	<a class="icon_unicode">(&amp;#xf02c;)</a><br />
						<a class="icon">&#xf02d;&nbsp;</a>	<a class="icon_name">wi-night-alt-thunderstorm&nbsp;</a>	<a class="icon_unicode">(&amp;#xf02d;)</a><br />
						<a class="icon">&#xf02e;&nbsp;</a>	<a class="icon_name">wi-night-clear&nbsp;</a>				<a class="icon_unicode">(&amp;#xf02e;)</a><br />
						<a class="icon">&#xf02f;&nbsp;</a>	<a class="icon_name">wi-night-cloudy-gusts&nbsp;</a>		<a class="icon_unicode">(&amp;#xf02f;)</a><br />
						<a class="icon">&#xf030;&nbsp;</a>	<a class="icon_name">wi-night-cloudy-windy&nbsp;</a>		<a class="icon_unicode">(&amp;#xf030;)</a><br />
						<a class="icon">&#xf031;&nbsp;</a>	<a class="icon_name">wi-night-cloudy&nbsp;</a>				<a class="icon_unicode">(&amp;#xf031;)</a><br />
						<a class="icon">&#xf032;&nbsp;</a>	<a class="icon_name">wi-night-hail&nbsp;</a>				<a class="icon_unicode">(&amp;#xf032;)</a><br />
						<a class="icon">&#xf033;&nbsp;</a>	<a class="icon_name">wi-night-lightning&nbsp;</a>			<a class="icon_unicode">(&amp;#xf033;)</a><br />
					</div>
					<div class="right">
						<a class="icon">&#xf034;&nbsp;</a>	<a class="icon_name">wi-night-rain-mix&nbsp;</a>			<a class="icon_unicode">(&amp;#xf034;)</a><br />
						<a class="icon">&#xf035;&nbsp;</a>	<a class="icon_name">wi-night-rain-wind&nbsp;</a> 			<a class="icon_unicode">(&amp;#xf035;)</a><br />
						<a class="icon">&#xf036;&nbsp;</a>	<a class="icon_name">wi-night-rain&nbsp;</a> 				<a class="icon_unicode">(&amp;#xf036;)</a><br />
						<a class="icon">&#xf037;&nbsp;</a>	<a class="icon_name">wi-night-showers&nbsp;</a> 			<a class="icon_unicode">(&amp;#xf037;)</a><br />
						<a class="icon">&#xf038;&nbsp;</a>	<a class="icon_name">wi-night-snow&nbsp;</a>				<a class="icon_unicode">(&amp;#xf038;)</a><br />
						<a class="icon">&#xf039;&nbsp;</a>	<a class="icon_name">wi-night-sprinkle&nbsp;</a>			<a class="icon_unicode">(&amp;#xf039;)</a><br />
						<a class="icon">&#xf03a;&nbsp;</a>	<a class="icon_name">wi-night-storm-showers&nbsp;</a>		<a class="icon_unicode">(&amp;#xf03a;)</a><br />
						<a class="icon">&#xf03b;&nbsp;</a>	<a class="icon_name">wi-night-thunderstorm&nbsp;</a>		<a class="icon_unicode">(&amp;#xf03b;)</a><br />
					</div>
					<div class="stop_float"> </div>
					
					<h2>Miscellaneous Weather</h2>
					
					<!--														MISCELLANEOUS WEATHER																	-->
					
					<!--	ICON							|	CSS NAME												|	UNICODE									 	-->
					<!-- -----------------------------------|-----------------------------------------------------------|----------------------------------------------	-->
					
					<div class="left">
						<a class="icon">&#xf03c;&nbsp;</a>	<a class="icon_name">wi-celcius&nbsp;</a>					<a class="icon_unicode">(&amp;#xf03c;)</a><br />
						<a class="icon">&#xf03d;&nbsp;</a>	<a class="icon_name">wi-cloud-down&nbsp;</a>				<a class="icon_unicode">(&amp;#xf03d;)</a><br />
						<a class="icon">&#xf03e;&nbsp;</a>	<a class="icon_name">wi-cloud-refresh&nbsp;</a>				<a class="icon_unicode">(&amp;#xf03e;)</a><br />
						<a class="icon">&#xf040;&nbsp;</a>	<a class="icon_name">wi-cloud-up&nbsp;</a>					<a class="icon_unicode">(&amp;#xf040;)</a><br />
						<a class="icon">&#xf041;&nbsp;</a>	<a class="icon_name">wi-cloud&nbsp;</a>						<a class="icon_unicode">(&amp;#xf041;)</a><br />
						<a class="icon">&#xf042;&nbsp;</a>	<a class="icon_name">wi-degrees&nbsp;</a>					<a class="icon_unicode">(&amp;#xf042;)</a><br />
						<a class="icon">&#xf043;&nbsp;</a>	<a class="icon_name">wi-down-left&nbsp;</a>					<a class="icon_unicode">(&amp;#xf043;)</a><br />
						<a class="icon">&#xf044;&nbsp;</a>	<a class="icon_name">wi-down&nbsp;</a>						<a class="icon_unicode">(&amp;#xf044;)</a><br />
						<a class="icon">&#xf045;&nbsp;</a>	<a class="icon_name">wi-fahrenheit&nbsp;</a>				<a class="icon_unicode">(&amp;#xf045;)</a><br />
						<a class="icon">&#xf046;&nbsp;</a>	<a class="icon_name">wi-horizon-alt&nbsp;</a>				<a class="icon_unicode">(&amp;#xf046;)</a><br />
						<a class="icon">&#xf047;&nbsp;</a>	<a class="icon_name">wi-horizon&nbsp;</a>					<a class="icon_unicode">(&amp;#xf047;)</a><br />
						<a class="icon">&#xf048;&nbsp;</a>	<a class="icon_name">wi-left&nbsp;</a>						<a class="icon_unicode">(&amp;#xf048;)</a><br />
					</div>
					<div class="center">
						<a class="icon">&#xf016;&nbsp;</a>	<a class="icon_name">wi-lightning&nbsp;</a>					<a class="icon_unicode">(&amp;#xf016;)</a><br />
						<a class="icon">&#xf04a;&nbsp;</a>	<a class="icon_name">wi-night-fog&nbsp;</a>					<a class="icon_unicode">(&amp;#xf04a;)</a><br />
						<a class="icon">&#xf04b;&nbsp;</a>	<a class="icon_name">wi-refresh-alt&nbsp;</a>				<a class="icon_unicode">(&amp;#xf04b;)</a><br />
						<a class="icon">&#xf04c;&nbsp;</a>	<a class="icon_name">wi-refresh&nbsp;</a>					<a class="icon_unicode">(&amp;#xf04c;)</a><br />
						<a class="icon">&#xf04d;&nbsp;</a>	<a class="icon_name">wi-right&nbsp;</a>						<a class="icon_unicode">(&amp;#xf04d;)</a><br />
						<a class="icon">&#xf04e;&nbsp;</a>	<a class="icon_name">wi-sprinkles&nbsp;</a>					<a class="icon_unicode">(&amp;#xf04e;)</a><br />
						<a class="icon">&#xf050;&nbsp;</a>	<a class="icon_name">wi-strong-wind&nbsp;</a>				<a class="icon_unicode">(&amp;#xf050;)</a><br />
						<a class="icon">&#xf051;&nbsp;</a>	<a class="icon_name">wi-sunrise&nbsp;</a>					<a class="icon_unicode">(&amp;#xf051;)</a><br />
						<a class="icon">&#xf052;&nbsp;</a>	<a class="icon_name">wi-sunset&nbsp;</a>					<a class="icon_unicode">(&amp;#xf052;)</a><br />
						<a class="icon">&#xf053;&nbsp;</a>	<a class="icon_name">wi-thermometer-exterior&nbsp;</a>		<a class="icon_unicode">(&amp;#xf053;)</a><br />
						<a class="icon">&#xf054;&nbsp;</a>	<a class="icon_name">wi-thermometer-internal&nbsp;</a>		<a class="icon_unicode">(&amp;#xf054;)</a><br />
						<a class="icon">&#xf055;&nbsp;</a>	<a class="icon_name">wi-thermometer&nbsp;</a>				<a class="icon_unicode">(&amp;#xf055;)</a><br />
					</div>
					<div class="right">
						<a class="icon">&#xf056;&nbsp;</a>	<a class="icon_name">wi-tornado&nbsp;</a>					<a class="icon_unicode">(&amp;#xf056;)</a><br />
						<a class="icon">&#xf057;&nbsp;</a>	<a class="icon_name">wi-up-right&nbsp;</a> 					<a class="icon_unicode">(&amp;#xf057;)</a><br />
						<a class="icon">&#xf058;&nbsp;</a>	<a class="icon_name">wi-up&nbsp;</a> 						<a class="icon_unicode">(&amp;#xf058;)</a><br />
						<a class="icon">&#xf059;&nbsp;</a>	<a class="icon_name">wi-wind-east&nbsp;</a> 				<a class="icon_unicode">(&amp;#xf059;)</a><br />
						<a class="icon">&#xf05a;&nbsp;</a>	<a class="icon_name">wi-wind-north-east&nbsp;</a>			<a class="icon_unicode">(&amp;#xf05a;)</a><br />
						<a class="icon">&#xf05b;&nbsp;</a>	<a class="icon_name">wi-wind-north-west&nbsp;</a>			<a class="icon_unicode">(&amp;#xf05b;)</a><br />
						<a class="icon">&#xf05c;&nbsp;</a>	<a class="icon_name">wi-wind-north&nbsp;</a>				<a class="icon_unicode">(&amp;#xf05c;)</a><br />
						<a class="icon">&#xf05d;&nbsp;</a>	<a class="icon_name">wi-wind-south-east&nbsp;</a>			<a class="icon_unicode">(&amp;#xf05d;)</a><br />
						<a class="icon">&#xf05e;&nbsp;</a>	<a class="icon_name">wi-wind-south-west&nbsp;</a>			<a class="icon_unicode">(&amp;#xf05e;)</a><br />
						<a class="icon">&#xf060;&nbsp;</a>	<a class="icon_name">wi-wind-south&nbsp;</a>				<a class="icon_unicode">(&amp;#xf060;)</a><br />
						<a class="icon">&#xf061;&nbsp;</a>	<a class="icon_name">wi-wind-west&nbsp;</a>					<a class="icon_unicode">(&amp;#xf061;)</a><br />
						<a class="icon">&#xf021;&nbsp;</a>	<a class="icon_name">wi-windy&nbsp;</a>						<a class="icon_unicode">(&amp;#xf021;)</a><br />
					</div>
					<div class="stop_float"> </div>
				</div>
			</div>

			<footer>
				<div id="footer_content">

				</div>
				
			</footer>
		</div>
	</body>
</html>
